<template>
    <el-container>
        <el-container>
            <el-aside width="240px">
                <el-menu background-color="#304156" text-color="#fff"
                         default-active="order"
                         :collapse-transition="false"
                         active-text-color="#409BFF"
                         :router="true">
<!--                    <el-menu-item  index="welcome">-->
<!--                        <i class="el-icon-s-home" />-->
<!--                        <span slot="title">首页</span>-->
<!--                    </el-menu-item >-->
                  <el-menu-item index="order">
                    <template slot="title">
                      <i class="el-icon-shopping-cart-2"></i>
                      <span>预约订单</span>
                    </template>
                  </el-menu-item>
                  <el-menu-item index="list">
                    <template slot="title">
                      <i class="el-icon-user-solid"></i>
                      <span>会员管理</span>
                    </template>
                  </el-menu-item>
                    <!--一级菜的模板区域-->

                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-date"></i>
                            <span>项目管理</span>
                        </template>
                        <el-menu-item index="hairList">
                            <template slot="title">
                                <i class="el-icon-s-check"></i>
                                <span>项目列表</span>
                            </template>
                        </el-menu-item>
                      <el-menu-item index="hairAdd">
                        <template slot="title">
                          <i class="el-icon-edit-outline"></i>
                          <span>新增项目</span>
                        </template>
                      </el-menu-item>
<!--                        <el-menu-item index="hairType">-->
<!--                            <template slot="title">-->
<!--                                <i class="el-icon-s-check"></i>-->
<!--                                <span>项目类型</span>-->
<!--                            </template>-->
<!--                        </el-menu-item>-->
                    </el-submenu>
                  <el-menu-item  index="hairType">
                    <i class="el-icon-coin" />
                    <span slot="title">项目类型</span>
                  </el-menu-item >

                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-s-check"></i>
                            <span>教练管理</span>
                        </template>
                        <el-menu-item index="coachList">
                            <template slot="title">
                                <i class="el-icon-s-check"></i>
                                <span>教练列表</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="barberAdd">
                            <template slot="title">
                                <i class="el-icon-edit"></i>
                                <span>新增教练</span>
                            </template>
                        </el-menu-item>
<!--                        <el-menu-item index="barberTypeList">-->
<!--                            <template slot="title">-->
<!--                              <i class="el-icon-coordinate"></i>-->
<!--                                <span>理发师类型列表</span>-->
<!--                            </template>-->
<!--                        </el-menu-item>-->
                    </el-submenu>

                  <el-menu-item  index="barberTypeList">
                    <i class="el-icon-s-data" />
                    <span slot="title">教练类型</span>
                  </el-menu-item >
                </el-menu>
            </el-aside>
            <el-main>
                <el-header height="54px">
                    <div>
                        <div class="user-logout">
                            <span  class="user">欢迎: {{name }}</span>
                          <el-button type="info" plain style="font-size: 15px" @click="logout">退出</el-button>
                        </div>
                    </div>
                </el-header>
               <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "home",
        data(){
            return{
                name:''
            }
        },
        mounted() {
          const user=this.$store.getters.get_user;
           this.name=user.name;

        },
      methods:{
         logout(){
          const token=this.$store.getters.get_token;
          console.log(token)
           this.$axios.delete('/api/login/logout/' +token).then((res) => {
            this.$store.commit("del_token", {});
            this.$store.commit("del_userInfo", {});
            console.log(res)
             location.reload();
          });

        }
      }
    }
</script>

<style scoped lang="less">
    .el-container{
        height: 100%;
        width: 100%;
    }
    .el-header, .el-footer {
        background-color: #ffffff;
        color: #333;
        /*text-align: center;*/
        /*display: flex;*/
        /*flex-flow: row;*/
        /*line-height: 80px;*/
        width: 100%;
        .user-logout{
            float: right;
            margin-top: 5px;
            .user{
                margin-right: 20px;
                font-size: 15px;
                color: #4A5064;
            }
        }
    }

    .el-aside {
        background-color: #304156;
        color: #333;
        /*text-align: center;*/
        line-height: 100%;
        /*height: 100%;*/
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        /*text-align: center;*/
        /*line-height: 160px;*/
        padding: 1px;
        width: 100%;
    }
</style>
